<!-- HIS接口方法字典 -->
<template>
    <div style="height: 100%; width: 100%; position: relative">
        <div class="pagetop">
            <div style="width: 100%">
                <el-col>
                    <div ref="buttondiv">
                        <vxe-toolbar>
                            <template v-slot:buttons>
                                <table>
                                    <tr>
                                        <td>快速查找</td>
                                        <td>
                                            <el-input style="width: 200px" v-model="searchtext"></el-input>
                                        </td>
                                        <td>所属系统</td>
                                        <td>
                                            <el-select style="width: 200px" @change="SysChange" :clearable="true"
                                                v-model="sysno">
                                                <el-option :key="item.prgcode" :label="item.prgname" :value="item.prgcode"
                                                    v-for="item in syslist"></el-option>
                                            </el-select>
                                        </td>
                                        <td :width="buttonwidth"></td>
                                        <td style="align: right">
                                            <el-button
                                                @click="FindList(), (isFirstLoading = false), (NewArr = []), (UpdateArr = [])"
                                                icon="el-icon-search" type="primary" v-has="'PINQUERY'">查询</el-button>
                                        </td>
                                        <td style="align: right">
                                            <el-button @click="OpenDialog(1)" icon="el-icon-plus"
                                                v-show="isAdmin">新增</el-button>
                                        </td>
                                        <td style="align: right">
                                            <el-button @click="OpenDialog(2)" icon="el-icon-edit"
                                                v-show="isAdmin">修改</el-button>
                                        </td>
                                        <td style="align: right">
                                            <el-button @click="OpenDialog(3)" icon="el-icon-delete"
                                                v-show="isAdmin">删除</el-button>
                                        </td>
                                        <td style="align: right">
                                            <el-button @click="exportEvent()" icon="el-icon-files"
                                                v-show="isAdmin">导出</el-button>
                                        </td>
                                        <td>
                                            <el-button @click="impotEvent()" icon="el-icon-files"
                                                v-show="isAdmin">导入</el-button>
                                        </td>
                                    </tr>
                                </table>
                            </template>
                        </vxe-toolbar>
                    </div>
                </el-col>
            </div>
        </div>
        <div class="pagecenter">
            <div ref="xTableDiv" style="height: 100%">
                <rm-layout-right splitcolor="#FFFFFF" movingcolor="#00ffff" :splitwidth="5" :fixsize="480"
                    :minfixsize="400">
                    <div style="height: 100%">
                        <vxe-table :data="list" :loading="loading" :keyboard-config="keyConfig"
                            :keyboard-local-config="keyLocalConfig" :row-class-name="rowClassName"
                            :checkbox-config="selectConfig" :sort-config="{ trigger: 'cell' }"
                            @current-change="currentChangeEvent" @cell-dblclick="MethodCellClick" border fit height="auto"
                            header-align="center" highlight-current-row highlight-hover-row highlight-hover-column
                            ref="xTable" resizable show-header-overflow="tooltip" show-overflow="ellipsis" size="mini"
                            stripe>
                            <vxe-table-column field="method_code" title="方法代码" width="200px" sortable></vxe-table-column>
                            <vxe-table-column field="method_name" title="方法名称" width="290px" sortable></vxe-table-column>
                            <vxe-table-column field="inter_name" title="接口类别" width="160px" sortable></vxe-table-column>
                            <vxe-table-column field="prgname" title="所属系统" width="140px" sortable></vxe-table-column>
                            <vxe-table-column field="description" title="使用说明" width="450px" sortable></vxe-table-column>
                            <vxe-table-column field="seq" title="序号" width="50px" sortable
                                :sort-width="20"></vxe-table-column>
                            <!-- <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in tableColumn" :sort-width="items.field=='seq'?20:0"></vxe-table-column> -->
                        </vxe-table>
                    </div>
                    <template v-slot:fix>
                        <div ref="middleright" style="height: 100%">
                            <el-form :inline="true" :model="HisMethod" @submit.native.prevent label-width="auto" ref="form">
                                <table height="100%" width="100%" style="border-spacing:3px 10px;table-layout：fixed"
                                    class="tablelayout">
                                    <tr>
                                        <td>方法代码:</td>
                                        <td>
                                            <el-input v-model="HisMethodright.method_code" readonly></el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>接口类别:</td>
                                        <td>
                                            <el-input v-model="HisMethodright.inter_name" readonly></el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>方法名称:</td>
                                        <td>
                                            <el-input v-model="HisMethodright.method_name" readonly></el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>所属系统:</td>
                                        <td>
                                            <el-input v-model="HisMethodright.prgname" readonly></el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>序号:</td>
                                        <td>
                                            <el-input v-model="HisMethodright.seq" readonly></el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top">使用说明:</td>
                                        <td>
                                            <!-- <div class="el-textarea el-input--small" style="height: calc(100% - 154px)">
                                            <pre class="el-textarea__inner">{{ HisMethodright.description }}</pre>
                                        </div> -->

                                            <el-input type="textarea" :rows="rownum" v-model="HisMethodright.description"
                                                readonly ref="descarea"></el-input>
                                        </td>
                                    </tr>
                                </table>
                            </el-form>
                        </div>
                    </template>
                </rm-layout-right>
            </div>
        </div>

        <el-dialog v-el-drag-dialog :close-on-click-modal="false" :center="true" :title="dialogtitle"
            :visible.sync="dialogFormVisible" @close="CancelTips()" width="800px">
            <el-form :inline="true" :model="HisMethod" @submit.native.prevent label-width="auto" ref="form"
                style="border: 1px solid #ccc">
                <table style="width: 100%">
                    <tr>
                        <td>方法代码：</td>
                        <td>
                            <el-input style="width: 100%" v-model="HisMethod.method_code" ref="inputmethcode"
                                @keyup.enter.native="autofocusEvent($event, 'code')"
                                :disabled="this.actionflag == 2"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>接口类别：</td>
                        <td>
                            <el-select style="width: 100%" v-model="HisMethod.inter_type" ref="inputinter"
                                @keyup.enter.native="autofocusEvent($event, 'inter')">
                                <el-option key="1" label="信息获取" value="1"></el-option>
                                <el-option key="2" label="操作判断" value="2"></el-option>
                                <el-option key="3" label="状态同步" value="3"></el-option>
                                <el-option key="4" label="状态同步(仅实时)" value="4"></el-option>
                                <el-option key="5" label="状态同步(仅后台)" value="5"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>方法名称：</td>
                        <td>
                            <el-input style="width: 100%" v-model="HisMethod.method_name" ref="inputname"
                                @keyup.enter.native="autofocusEvent($event, 'name')"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>所属系统：</td>
                        <td>
                            <el-select style="width: 100%" v-model="HisMethod.sysno" ref="inputsysno"
                                @keyup.enter.native="autofocusEvent($event, 'sysno')">
                                <el-option :key="item.prgcode" :label="item.prgname" :value="item.prgcode"
                                    v-for="item in syslist"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>序号：</td>
                        <td>
                            <el-input style="width: 100%" v-model="HisMethod.seq" ref="inputseqno"
                                @keyup.enter.native="autofocusEvent($event, 'seqno')"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top">使用说明：</td>
                        <td>
                            <el-input type="textarea" style="width: 100%" :rows="rownum" v-model="HisMethod.description"
                                ref="inputdesc" @keyup.enter.native="autofocusEvent($event, 'desc')"></el-input>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div style="text-align: right; padding-top: 5px">
                <el-button @click="CommitTips()">确定</el-button>
                <el-button @click="(dialogFormVisible = false), CancelTips()">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog v-el-drag-dialog :close-on-click-modal="false" title="提示" :visible.sync="dialogVisible" width="30%">
            <div class="el-message-box__status el-icon-warning"></div>
            <div class="el-message-box__message" style="padding-top: 24px">
                <p>
                    确定要删除HIS接口方法<b style="color: red">{{ HisMethodright.method_name }}</b>吗?
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="CommitTips()">确 定</el-button>
                <el-button @click="CancelTips()">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog v-el-drag-dialog :close-on-click-modal="true" title="内容" :visible.sync="dialogDetailVisible" width="50%">
            <el-input type="textarea" :rows="30" v-model="MethodDetail" readonly></el-input>
            <div style="width: 100%; text-align: right; margin-top: 5px">
                <el-button @click="dialogDetailVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
    name: "MNG140",
    data() {
        return {
            loading: false,
            HisMethod: {},
            HisMethodright: {},
            HistempMethod: {},
            tableData: [],
            tableTempData: [],
            tableColumn: [],

            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
            },
            keyLocalConfig: {
                isArrow: true,
            },
            selectConfig: { tigger: "row" },
            buttonwidth: "",

            searchtext: "",
            AddArray: "",
            NewArr: [],
            UpdateArr: [],
            sysno: "",
            dialogFormVisible: false,
            dialogVisible: false,
            dialogtitle: "",
            actionflag: 0,
            commitflag: false,
            Delmethodname: "",
            tempRowIndex: 0,
            isFirstLoading: true,
            syslist: [],
            dialogDetailVisible: false,
            MethodDetail: "",
            rownum: 20,
            isAdmin: false,
        };
    },
    computed: {
        list() {
            let filterName = this.searchtext.trim();
            if (filterName) {
                let filterRE = new RegExp(filterName, "gi");
                let num = this.AddArray;
                let rest = this.tableData.filter((item) => {
                    return item.method_code.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.method_name ? item.method_name.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false) || (item.description ? item.description.match(filterName.toUpperCase()) != null : false) || item.method_code == num;
                });
                return rest;
            } else {
                return this.tableData;
            }
        },
    },
    created() {
        var userno = this.$tool.getSession(this.$tool.loginuserno);
        this.isAdmin = userno == "admin" || userno == "bis";
        this.FindList();
    },
    watch: {
        searchtext(val) {
            var length = this.tableData.length;
            if (this.AddArray.length > 0) {
                this.AddArray.length = 0;
            }
            this.$nextTick(() => {
                var row = this.$refs.xTable.getCurrentRow();
                var aftersearchrow = this.$refs.xTable.tableData.filter((item) => {
                    return item.method_code == row.method_code;
                });
                if (aftersearchrow.length == 0) {
                    if (this.$refs.xTable.tableData.length > 0) row = this.$refs.xTable.tableData[0];
                    if (row.method_code) {
                        this.$refs.xTable.setCurrentRow(row);
                        this.HisMethodright = row;
                        this.Delmethodname = row.method_name;
                        this.tempRowIndex = this.$refs.xTable.getRowIndex(row);
                    }
                }
            });
        },
    },
    mounted() {
        this.rownum = (this.$refs.middleright.offsetHeight - 160) / 18;
    },
    updated() {
        this.getButtonWidth();

        if (this.isFirstLoading) {
            var selectrow = {};
            if (this.AddArray.length > 0) {
                selectrow = this.$refs.xTable.tableData.filter((item) => {
                    return item.method_code == this.AddArray;
                })[0];
            } else {
                if (this.tempRowIndex > 0) selectrow = this.$refs.xTable.getData(this.tempRowIndex);
                else selectrow = this.$refs.xTable.getData(0);
            }

            if (selectrow) {
                this.isFirstLoading = false;
                this.$refs.xTable.setCurrentRow(selectrow);
                this.HisMethodright = selectrow;
                this.Delmethodname = selectrow.method_name;
                this.tempRowIndex = this.$refs.xTable.getRowIndex(selectrow);
                this.$refs.xTable.scrollToRow(selectrow);
            }
        }
    },
    methods: {
        currentChangeEvent({ row }) {
            this.HisMethodright = row;
            this.Delmethodname = row.method_name;
            this.tempRowIndex = this.$refs.xTable.getRowIndex(row);
            if (this.AddArray.length > 0) {
                this.AddArray = "";
            }
        },
        MethodCellClick({ row, column }) {
            this.MethodDetail = row[column.property];
            this.dialogDetailVisible = true;
        },
        getButtonWidth() {
            if (this.$refs.buttondiv) {
                this.buttonwidth = this.$refs.buttondiv.offsetWidth + "px";
            }
        },
        rowClassName({ row, rowIndex }) {
            if (this.NewArr.indexOf(row.method_code + "") > -1) {
                return "Add";
            }
            if (this.UpdateArr.indexOf(row.method_code + "") > -1) {
                return "Update";
            }
        },
        OpenDialog(flag) {
            this.actionflag = flag;
            if (flag == 1) {
                this.HisMethod = { sysno: this.sysno };
                this.dialogtitle = "新增接口方法";
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    this.$refs.inputmethcode.focus();
                });
            }
            if (flag == 2) {
                if (this.HisMethodright && this.HisMethodright.method_code && this.HisMethodright.method_code != 0) {
                    this.FindDetail();
                    this.dialogtitle = "修改接口方法";
                    this.dialogFormVisible = true;
                    this.$nextTick(() => {
                        this.$refs.inputinter.focus();
                    });
                } else {
                    this.$message("请先选择一条需要修改的数据");
                }
            }
            if (flag == 3) {
                if (this.HisMethodright && this.HisMethodright.method_code && this.HisMethodright.method_code != 0) {
                    this.dialogVisible = true;
                } else {
                    this.$message("请先选择一条需要删除的数据");
                }
            }
            this.DelIndex = -1;
        },
        CancelTips() {
            if (this.actionflag < 3) {
                this.dialogFormVisible = false;
                if (!this.commitflag) {
                    for (var key in this.showtempMdl) {
                        this.inputMdl[key] = this.showtempMdl[key];
                    }
                }
            } else {
                this.dialogVisible = false;
            }
        },
        CommitTips() {
            this.commitflag = true;
            if (this.actionflag < 3) {
                this.dialogFormVisible = false;
            } else {
                this.dialogVisible = false;
            }
            this.SaveResult();
        },
        FindList() {
            this.loading = true;
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG140",
                    method: "post",
                    data: {
                        action: "query",
                    },
                })
                .then((res) => {
                    this.tableColumn = res.RData.Cols;
                    var cotaindata = res.RData.Data;
                    this.syslist = res.syslist;
                    for (let i = 0; i < cotaindata.length; i++) {
                        if (this.NewArr.indexOf(cotaindata[i].method_code + "") > -1) {
                            cotaindata[i].isadd = 1;
                        } else {
                            cotaindata[i].isadd = 0;
                        }
                    }
                    //cotaindata.sort((a, b) => a.isadd - b.isadd);
                    this.tableData = cotaindata;
                    this.tableTempData = JSON.parse(JSON.stringify(res.RData.Data));
                    if (this.sysno) this.SysChange(this.sysno);
                    this.$nextTick(() => {
                        var selectrow = {};
                        if (this.AddArray.length > 0) {
                            selectrow = this.$refs.xTable.tableData.filter((item) => {
                                return item.method_code == this.AddArray;
                            })[0];
                        } else {
                            if (this.tempRowIndex > 0) selectrow = this.$refs.xTable.getData(this.tempRowIndex);
                            else selectrow = this.$refs.xTable.getData(0);
                        }

                        if (selectrow) {
                            this.isFirstLoading = false;
                            this.$refs.xTable.setCurrentRow(selectrow);
                            this.HisMethodright = selectrow;
                            this.Delmethodname = selectrow.method_name;
                            this.tempRowIndex = this.$refs.xTable.getRowIndex(selectrow);
                            this.$refs.xTable.scrollToRow(selectrow);
                        }
                    });
                    this.loading = false;
                });
        },
        FindDetail() {
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG140",
                    method: "post",
                    data: {
                        action: "querydetail",
                        method_code: this.HisMethodright.method_code,
                    },
                })
                .then((res) => {
                    this.HisMethod = res.Data[0];
                    this.HistempMethod = JSON.parse(JSON.stringify(res.Data[0]));
                });
        },
        SaveResult() {
            var savedata = {};
            if (this.actionflag < 3) {
                savedata = JSON.parse(JSON.stringify(this.HisMethod));
            } else {
                savedata = JSON.parse(JSON.stringify(this.HisMethodright));
            }
            this.$tool
                .request({
                    url: "MNG/MNG1/MNG140",
                    method: "post",
                    data: {
                        action: "save",
                        utype: this.actionflag,
                        saveinfo: savedata,
                        oldinfo: this.HistempMethod,
                    },
                })
                .then((res) => {
                    if (res.errcode == 1) {
                        if (this.actionflag < 3) {
                            this.$message({
                                message: "保存成功",
                                type: "success",
                            });
                            this.AddArray = res.keyid + "";
                            this.HisMethodright = savedata;
                            if (this.actionflag == 1) {
                                this.NewArr.push(res.keyid + "");
                                this.tableTempData.push(res.keydata[0]);
                                //this.FindList();
                            } else if (this.actionflag == 2) {
                                this.UpdateArr.push(res.keyid + "");
                                var trow = this.tableTempData.find((item) => item.method_code == res.keyid);
                                for (var item in res.keydata[0]) {
                                    trow[item] = res.keydata[0][item];
                                }
                            }
                            this.$nextTick(() => {
                                this.SysChange(this.sysno);
                            });
                            //this.FindList();
                        } else {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            var delrow = this.$refs.xTable.getCurrentRow();
                            if (delrow) {
                                var alld = this.$refs.xTable.tableData;
                                var rowindex = alld.indexOf(delrow);
                                this.$refs.xTable.remove(delrow);
                                var allrowindex = this.tableData.indexOf(delrow);
                                this.tableData.splice(allrowindex, 1);
                                let havedata = this.$refs.xTable.tableData;
                                if (havedata.length > 0) {
                                    if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                                    let selectrow = havedata[rowindex];
                                    this.$refs.xTable.setCurrentRow(selectrow);
                                    this.HisMethodright = selectrow;
                                }
                            }
                        }
                    } else {
                        this.$message.error("保存失败:" + res.errmsg);
                    }
                });
        },
        autofocusEvent(event, element) {
            if (element == "code") {
                this.$refs.inputinter.focus();
            }
            if (element == "inter") {
                this.$refs.inputinter.blur();
                this.$refs.inputname.focus();
            }
            if (element == "name") {
                this.$refs.inputsysno.focus();
            }
            if (element == "sysno") {
                this.$refs.inputseqno.focus();
            }
            if (element == "seqno") {
                this.$refs.inputdesc.focus();
            }
        },
        SysChange(value) {
            this.sysno = value;
            let totaldata = this.tableTempData;
            if (value)
                this.tableData = totaldata.filter((item) => {
                    return item.sysno == value;
                });
            else this.tableData = totaldata;
            this.$refs.xTable.$forceUpdate();
            if (this.tableData.length > 0) {
                let selrow = this.tableData.find((item) => item.method_code == this.HisMethodright.method_code);
                if (!selrow) {
                    this.$refs.xTable.setCurrentRow(this.tableData[0]);
                    this.HisMethodright = this.tableData[0];
                } else {
                    this.$refs.xTable.setCurrentRow(selrow);
                }
            } else {
                this.HisMethodright = {};
            }
        },
        exportEvent() {
            let p = { prgno: "MNG140" };
            this.$pub.commexport(this, p, `HIS接口方法字典.dat`);
        },
        impotEvent() {
            this.$rm_uploadFiles({
                type: "文件上传",
                prgname: "MNG140",
                btn: {
                    confirmBtnText: "立即上传",
                    cancelBtnText: "取消",
                },
            })
                .then((res) => {
                    if (res.flag == "1") {
                        this.$notify.success({
                            title: "成功",
                            message: res.msg ? res.msg : `文件上传成功`,
                        });
                        this.findList();
                    } else {
                        this.$notify.error({
                            title: "错误",
                            message: res.msg ? res.msg : `文件上传失败`,
                        });
                    }
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
    },
};
</script>

<style scoped>
::v-deep .Update {
    color: #5050fa;
}

::v-deep .Add {
    color: #b47c7c;
}

::v-deep .vxe-body--row.row-stop {
    color: white !important;
    background-color: rgb(255, 192, 192) !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
    color: black;
}

::v-deep .el-checkbox.is-disabled .el-checkbox__label {
    color: black;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: black;
}

.pagetop {
    left: 0;
    right: 0;
    height: 36px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
}

.middle-center {
    position: absolute;
    height: 100%;
    right: 485px;
    left: 0;
    overflow: auto;
}

.middle-right {
    position: absolute;
    top: 0;
    bottom: 2px;
    overflow: visible;
    width: 480px;
    right: 0px;
}

table tr td:nth-child(odd) {
    text-align: right;
    white-space: nowrap;
}

table tr td:nth-child(even) {
    text-align: left;
}

table tr td:nth-child(1) {
    width: 50px;
}

table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
}

::v-deep .el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}

::v-deep .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}

::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner+.el-input.is-disabled .el-input__inner {
    background-color: #ffffff !important;
}</style>